window.onload = function(){
    var phone = document.getElementsByName('phone');
    var span = document.getElementsByTagName('span');

    //获取焦点函数
    phone[0].onfocus=function(){
        // console.log(1);
        this.style.border = "1px solid #ff8e00";
    }
    phone[0].onblur = function(){
        this.style.border = "1px solid #aaa";
        //判断手机号码
        var phoneValue = phone[0].value;
        // console.log(phoneValue);
        if(phoneValue == ''){
            span[0].className = "display-inline icon-times-circle";
            span[0].innerHTML = '手机号码不能为空';
            frmContact.setAttribute("disabled","true");
        }
        //判断手机号是否是正确
        if(phoneValue != ''){
            //正则匹配手机号
            var isOk = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(phoneValue);
            // console.log(isOk);
            if(isOk){
                span[0].className = 'display-inline icon-check-circle';
                span[0].innerHTML = '手机号码正确';
                frmContact.removeAttribute("disabled");
            }else{
                span[0].className = 'display-inline icon-times-circle';
                span[0].innerHTML = '手机号码不正确';
                frmContact.setAttribute("disabled","true");
            }
        }
    }
    //验证码发送和验证
    var button = document.getElementsByTagName('button');
    button[0].onclick=function(){
        //生成验证码
        function randomf(){
            var randomf = Math.floor(Math.random()*(9999-1000+1)+1000);
            return randomf;
        }
        var randomf = randomf();
        //将随机数添加到页面中
        span[1].className = 'display-inline';
        span[1].innerHTML = randomf;
    }
    //进行验证码的匹配
    var code = document.getElementById('code');
    //焦点函数触发
    code.onfocus = function(){
        this.style.border = "1px solid #ff8e00";
    }
    code.onblur = function(){
        this.style.border = "1px solid #aaa";
        //用户填入的验证码
        var codeValue = code.value;
        //span节点里面的验证码
        var spanValue = span[1].innerHTML;
        //判断号码不能为空
        if(codeValue == ''){
            span[2].className = 'display-inline icon-times-circle';
            span[2].innerHTML = '验证码不能为空';
            frmContact.setAttribute("disabled","true");
        }
        //判断验证码是否正确
        if(codeValue != ''){
            if(codeValue != spanValue){
                span[2].className = 'display-inline icon-times-circle';
                span[2].innerHTML = '验证码不匹配！';
                frmContact.setAttribute("disabled","true");
            }else{
                span[2].className = 'display-inline icon-check-circle';
                span[2].innerHTML = '验证码正确！';
                frmContact.removeAttribute("disabled");
            }
        }
    }
    //密码强度判定
    //字符串声明
    var aStr = ["弱", "中", "强", "安全"];
    //用户输入内容检测函数
    function checkStrong(val) {
        var modes = 0;
        if (val.length < 6) return 0;
        if (/\d/.test(val)) modes++; //数字
        if (/[a-z]/.test(val)) modes++; //小写
        if (/[A-Z]/.test(val)) modes++; //大写 
        if (/\W/.test(val)) modes++; //特殊字符
        if (val.length > 12) return 4;
        return modes;
    };
    // 用户输入完内容 键盘松开的时候
    var password = document.getElementById("password");
    password.onkeyup=function() {
    this.style.border = "1px solid #ff8e00";
	// 获取用户输入的内容
    var val = password.value;
    //执行函数判断用户输入内容
    var num = checkStrong(val);
    //获取id为tips下的所有span节点
	var tipsSpan = document.getElementById("tips").getElementsByTagName("b");
    //根据返回值设置密码强度的颜色
        switch (num) {
            case 0:
              break;
            case 1:
            	tipsSpan[0].style.backgroundColor="red";
				tipsSpan[0].innerHTML=aStr[num - 1];
              	break;
            case 2:
              	tipsSpan[0].style.backgroundColor="yellow";
              	tipsSpan[1].style.backgroundColor="yellow";
				tipsSpan[1].innerHTML=aStr[num - 1];
              	break;
            case 3:
              	//遍历颜色
            	for(var i=0;i<3;i++){
            		tipsSpan[i].style.backgroundColor="green";
            	}
				tipsSpan[2].innerHTML=aStr[num - 1];
              break;
            case 4:
            	//遍历颜色
            	for(var i=0;i<4;i++){
            		tipsSpan[i].style.backgroundColor="green";
            	}
				tipsSpan[3].innerHTML=aStr[num - 1];
              break;
            default:
              break;
        }
    }
    //密码匹配判定
    var passRepeat = document.getElementById('passrepeat');
    //获取焦点函数
    passRepeat.onfocus = function(){
        this.style.border = "1px solid #ff8e00";
    }
    //失去焦点函数
    passRepeat.onblur = function(){
        //设置边框颜色
        this.style.border = "1px solid #aaa";
        //获取重复密码的值
        var passRepeatValue = passRepeat.value;
        //获取密码的值
        var passwordValue = password.value;
        //判断两次输入的是否一样
        if(passwordValue != passRepeatValue){
            span[3].className = 'display-inline icon-times-circle';
            span[3].innerHTML = "两次输入的密码不匹配";
            frmContact.setAttribute("disabled","true");
        }else{
            span[3].className = 'display-inline icon-check-circle';
            span[3].innerHTML = "两次输入的密码匹配";
            frmContact.removeAttribute("disabled");
        }
    }
    //点击注册跳转页面
    var frmContact = document.getElementById('frmContact');
    frmContact.onclick = function(){
        if(phone[0].value=="" || code.value=="" || password.value=="" || passRepeat.value ==""){
            alert("主人！请填写完信息后再点击注册");
        }else{
            alert("已注册成功！以后您就是我爹")
            window.location.href = "./login.html?phone="+phone[0].value+"&pass="+password.value;
        }
    }
}